<template>
  <div class="warpc">
    <ShopList />
    <!-- <ShopListC /> -->
    <div class="warpcdh">
      <div class="foodlist">
        <router-link to="/shoplist/ShopListE1">
          <img src="chenkong/imgs/shopcenter/1.gif" alt />
          <p>美食餐厅</p>
        </router-link>
        <router-link to="/shoplist/ShopListE2" @click="fun()">
          <img src="chenkong/imgs/shopcenter/2.gif" alt />
          <p>发现好店</p>
        </router-link>
        <router-link to="/shoplist/ShopListE3">
          <img src="chenkong/imgs/shopcenter/3.gif" alt />
          <p>优惠套餐</p>
        </router-link>
        <router-link to="/shoplist/ShopListE4">
          <img src="chenkong/imgs/shopcenter/4.gif" alt />
          <p>寻味好菜</p>
        </router-link>

        <div class="line" ref="block"></div>
      </div>
      <div class="select">
        <div>
          <span>全程</span>
          <img src="chenkong/imgs/shopcenter/xjt.gif" alt />
        </div>
        <div>
          <span>美食</span>
          <img src="chenkong/imgs/shopcenter/xjt.gif" alt />
        </div>
        <div>
          <span>智能排序</span>
          <img src="chenkong/imgs/shopcenter/xjt.gif" alt />
        </div>
        <div>
          <span>删选</span>
          <img src="chenkong/imgs/shopcenter/xjt.gif" alt />
        </div>
      </div>
    </div>

    <router-view></router-view>
  </div>
</template>


<script>
import ShopList from "@/components/chenkong/indexC/ShopList.vue";

export default {
  components: {
    ShopList
  }
};
</script>

<style lang="scss" scoped>
.warpc {
  margin-top: 5.6vw;
  .warpcdh {
    margin-top: 0.75rem;
    width: 100%;
    .foodlist {
      display: flex;
      width: 95%;
      margin: auto;
      justify-content: space-around;
      position: relative;
      a {
        display: flex;
        flex-direction: row;
        img {
          width: 1rem;
          line-height: 3.733vw;
          vertical-align: middle;
        }
        p {
          color: black;
          font-size: 3.2vw;
          font-weight: bold;
          padding-left: 1.333vw;

          line-height: 3.733vw;
        }
      }

      .line {
        width: 16vw;
        height: 2.133vw;
        background-image: linear-gradient(to right, #ed3828, #edac69);
        left: 7.4vw;
        bottom: -0.333vw;
        position: absolute;
        z-index: -99;
      }
    }
    .select {
      padding: 3.467vw 0;
      display: flex;
      width: 95%;
      margin: auto;
      justify-content: space-around;
      font-size: 3.2vw;
      span {
        padding: 0 1.333vw;
        margin-left: 1.333vw;
      }
      img {
        width: 2.133vw;
        vertical-align: middle;
      }
    }
  }
}
</style>